<template>
	<div class="timeline-container">
		<!-- 遍历已排序的年份数据数组 -->
		<div v-for="yearData in sortedTimelineData" :key="yearData.year" class="year-group">
			<!-- 年份 -->
			<div class="time-block year">
				<span class="time-text">{{ yearData.year }}</span>
			</div>

			<!-- 遍历该年份下已排序的月份数据数组 -->
			<div v-for="monthData in yearData.months" :key="monthData.month" class="month-group">
				<div class="time-block month">
					<!-- 显示月份 -->
					<span class="time-text">{{ monthData.month }}月</span>
				</div>

				<!-- 遍历该月份的文章列表 (文章本身已按时间降序排列) -->
				<div v-for="post in monthData.posts" :key="post.id" class="post-item" @click="gotoarticle(post)">
					<div class="time-block">
						<!-- 显示日期 'MM-DD' -->
						<span class="time-text">{{ formatDate(post.time) }}</span>
					</div>
					<div class="content">
						<!-- 如果有 URL，则显示为链接 -->
						<a href="#" class="title">{{ post.title }}</a>
						<!-- 否则，只显示标题文本 -->
						<!-- <span class="title">{{ post.title }}</span> -->
					</div>
				</div>
			</div>
		</div>
		<!-- 如果没有数据则显示提示 -->
	    <div v-if="sortedTimelineData.length === 0" class="no-data">
	      未查询到相关文章
	    </div>
	</div>
</template>

<script setup>
	// 导入 Vue 相关模块
	import { computed } from 'vue';
	import { useRouter } from 'vue-router';
	
	const router = useRouter();

	// --- Props 定义 ---
	// 不再使用 TypeScript 接口，改用 JSDoc 注释
	/**
	 * 博客文章对象结构
	 * @typedef {Object} BlogPost
	 * @property {number} id - 文章唯一ID
	 * @property {string} tab - 标签
	 * @property {string} author - 作者
	 * @property {number} views - 浏览量
	 * @property {number} time - 时间戳（毫秒）
	 * @property {string} title - 文章标题
	 * @property {string} [context] - 可选的文章内容摘要
	 * @property {string} [url] - 可选的文章链接
	 */

	// 定义组件接收的 props
	const props = defineProps({
		items: {
			type: Array,
			required: true
		}
	});

	// --- 工具函数 ---

	// 格式化时间戳为 'MM-DD' 格式的字符串
	const formatDate = (timestamp) => {
		const date = new Date(timestamp);
		const month = (date.getMonth() + 1).toString().padStart(2, '0');
		const day = date.getDate().toString().padStart(2, '0');
		return `${month}-${day}`;
	};

	// 从时间戳获取年份字符串
	const getYear = (timestamp) => {
		return new Date(timestamp).getFullYear().toString();
	};

	// 从时间戳获取月份数字 (1-12)
	const getMonth = (timestamp) => {
		return new Date(timestamp).getMonth() + 1;
	};

	// --- 数据处理 (计算属性) ---

	// 计算属性：将文章分组，并返回按年份和月份降序排列的数组结构
	const sortedTimelineData = computed(() => {
		// 临时存储分组结果的对象，结构：{ 年份: { 月份: [文章列表] } }
		const groups = {};

		// 1. 按时间戳降序排序所有文章 (最新的文章排在最前面)
		const sortedPosts = [...props.items].sort((a, b) => b.time - a.time);

		// 2. 遍历排序后的文章，按年份和月份进行分组
		sortedPosts.forEach(post => {
			const year = getYear(post.time);
			const month = getMonth(post.time);
			const monthKey = month.toString(); // 使用月份数字的字符串形式作为 key

			if (!groups[year]) {
				groups[year] = {};
			}
			if (!groups[year][monthKey]) {
				groups[year][monthKey] = [];
			}
			groups[year][monthKey].push(post);
		});

		// 3. 将分组后的对象转换为排序后的数组结构，以保证 v-for 的迭代顺序
		// 最终结构: [ { year: 'YYYY', months: [ { month: 'MM', posts: [...] }, ... ] }, ... ]
		const result = Object.keys(groups) // 获取所有年份键 ['2023', '2024']
			.sort((a, b) => Number(b) - Number(a)) // 按年份数字降序排序 ['2024', '2023']
			.map(year => { // 遍历排序后的年份
				const monthsData = Object.keys(groups[year]) // 获取该年份下的所有月份键 ['2', '12']
					.sort((a, b) => Number(b) - Number(a)) // 按月份数字降序排序 ['12', '2']
					.map(monthKey => ({ // 遍历排序后的月份键
						month: monthKey, // 月份键 ('12', '2')
						posts: groups[year][monthKey] // 对应的文章数组 (已经按时间降序排好)
					}));
				return { // 返回年份对象
					year: year, // 年份 ('2024', '2023')
					months: monthsData // 该年份下包含排序后月份数据的数组
				};
			});

		console.log('Timeline排序后的数组:', result); // 调试用，保留以便调试
		return result; // 返回这个保证了顺序的数组
	});

	function gotoarticle(post){
		// console.log("TimeLine: 点击文章，准备跳转", post.title);
		
		// 清除可能的缓存
		sessionStorage.removeItem("article");
		
		// 设置文章数据到 sessionStorage
		sessionStorage.setItem("article", JSON.stringify(post));
		// console.log("TimeLine: sessionStorage设置完成");
		
		// console.log("TimeLine: 开始路由跳转");
		
		// 使用 window.location.href 跳转代替 router.push
		setTimeout(() => {
			// 延迟执行确保 sessionStorage 已写入
			window.location.href = "/#/disarticle";
		}, 100);
		
		console.log("TimeLine: 路由跳转指令已发出");
	}
</script>

<style scoped>
	/* --- 基础样式 --- */
	.timeline-container {
		position: relative;
		padding-left: 160px;
	}

	/* 时间轴垂直线 */
	.timeline-container::before {
		content: '';
		position: absolute;
		left: 144px;
		top: 0;
		bottom: 0;
		width: 1px;
		background-color: #e8e8e8;
	}

	/* 时间块通用样式 */
	.time-block {
		position: relative;
		min-height: 24px;
		display: flex;
		align-items: center;
	}

	.time-block::before {
		content: '';
		position: absolute;
		left: -20px;
		top: 50%;
		transform: translateY(-50%);
		width: 10px;
		height: 10px;
		border-radius: 50%;
		background-color: #64b5f6;
	}

	.time-text {
		position: absolute;
		left: -140px;
		width: 100px;
		text-align: right;
		color: #666;
		font-weight: 500;
	}

	/* 年份样式 */
	.year {
		margin: 24px 0;
	}

	.year .time-text {
		font-size: 30px;
		color: var(--primary-color);
	}

	/* 月份样式 */
	.month {
		margin: 16px 0;
	}

	.month .time-text {
		font-size: 22px;
		color: var(--primary-color);
	}

	/* 文章条目样式 */
	.post-item {
		position: relative;
		margin: 12px 0;
		min-height: 24px;
		display: flex;
		align-items: center;
	}

	.post-item .time-text {
		font-size: 16px;
	}

	.content {
		padding-left: 20px;
		flex: 1;
	}

	.title {
		color: var(--primary-color);
		text-decoration: none;
		font-size: 16px;
		font-weight: 500;
		line-height: 1.5;
	}

	a.title:hover {
		color: #42a5f5;
	}

	/* 月份组样式 */
	.month-group {
		margin: 16px 0;
	}

	/* 年份组样式 */
	.year-group {
		margin: 24px 0;
	}
	
	.no-data{
		width: 100%;
		height: 100%;
		text-align: center;
		font-size: 30px;
		color: #70f6f2;
		/* background-color: #42a5f5; */
	}
</style>